<script setup lang="ts">
import { defineComponent } from 'vue'
import DesktopStatus from '@/components/desktop-status/index.vue'
import DesktopView from '@/components/desktop-view/index.vue'
import DesktopFixed from '@/components/desktop-fixed/index.vue'

defineComponent({
  name: 'DesktopLayout',
})
</script>

<template>
  <div class="desktop">
    <div class="desktop-status">
      <DesktopStatus></DesktopStatus>
    </div>
    <div class="desktop-view">
      <DesktopView></DesktopView>
    </div>
    <div class="desktop-fixed">
      <DesktopFixed></DesktopFixed>
    </div>
  </div>
</template>

<style scoped>
.desktop {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.desktop-status {
  height: 60px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.desktop-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  padding: 60px 0 80px;
  box-sizing: border-box;
}
.desktop-fixed {
  height: 80px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}
</style>
